﻿.docs-page {
    & > .mud-container > .mud-typography-h4 {
        margin-top: 52px;
    }
}

.docs-page-header {

    & .mud-typography-h3 {
        font-size: 40px;
        margin-bottom: 16px;
    }

    & .mud-typography-h4 {
        margin-top: 0px;
    }

    margin-bottom: 50px;
}

.docs-page-content {
}

.docs-page-section {
    margin-bottom: 50px;
}

.docs-code {
    display: inline-block;
    padding: 0 5px;
    direction: ltr;
    font-size: .85em;
    font-weight: 900;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    line-height: 1.4;
    border-radius: 2px;
    -webkit-font-smoothing: subpixel-antialiased;

    &.docs-code-primary {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover);
    }

    &.docs-code-secondary {
        color: var(--mud-palette-secondary);
        background-color: var(--mud-palette-secondary-hover);
    }

    &.docs-code-tertiary {
        color: var(--mud-palette-tertiary);
        background-color: var(--mud-palette-tertiary-hover);
    }
}



.docs-frame {
    height: 100%;
    width: 100%;
    position: relative;
    height: 400px;

    & .docs-frame-absolute {
        position: absolute;
        bottom: 0px;
        left: 0px;
        top: 0px;
        right: auto;
        width: 100%;
        height: 100%;

        & .docs-frame-inner-wrapper {
            display: flex;
            height: 100%;
            overflow: auto;
            flex-direction: column;
        }
    }
}

.docs-contents {
    display: none;
}

.docs-page-section[api-link-section] {
    margin: 0px;

    .docs-section-header {
        margin: 0px;

        .mud-typography {
            margin: 0px;
        }
    }
}

.docs-page-apilinks {
    ul li a {

        &:hover {
            text-decoration: none !important;
        }

        .docs-code {
            transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;

            &:hover {
                text-decoration: none !important;
                background-color: rgba(var(--mud-palette-primary-rgb), 0.20);
            }
        }
    }
}